<template name="appMessageCreate">

<div class="small ui modal" id="lowOtsKeyWarning">
  <div class="header">OTS Keys Running Low!</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          Warning: Your OTS Keys are running low.
        </div>
        <p>You only have <strong>{{otsKeysRemaining}}</strong> OTS Keys remaining. When you have used all of these, you will no longer be able to send QRL or Tokens from this wallet.</p>
        <p>It is strongly suggested that you create a new wallet, and move all your QRL and Tokens to it to ensure you do not lose access to your funds.</p>
        <p><a href="https://docs.theqrl.org/developers/ots/" target="_blank">Click here to learn what OTS Keys are.</a></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button red">Okay</div>
  </div>
</div>

<div class="small ui modal" id="invalidNodeResponse">
  <div class="header">WARNING - Bad Response</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          WARNING - The node you've requested this transaction from replied with bad data that doesn't match your intended transaction parameters.
          <br /><br />
          This transaction has been cancelled automatically to protect your funds.
          <br /><br />
          Please report this issue through a Github issue, or directly to the QRL Team via email: info@theqrl.org
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button red">Okay</div>
  </div>
</div>

<div class="small ui modal" id="otsKeyReuseDetected">
  <div class="header">OTS Key Reuse</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          You have attempted to create a transaction using an OTS Key Index that has previously been used on the QRL Network.
          <br /><br />
          Please recreate your transaction using a unique OTS Key Index.
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">Okay</div>
  </div>
</div>

<div class="small ui modal" id="ledgerOtsKeyReuseDetected">
  <div class="header">OTS Key Reuse</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          You have attempted to create a transaction using an OTS Key Index that has previously been used on the QRL Network.
          <br /><br />
          You need to update your Ledgers XMSS Index in Tools -> Set XMSS Index.
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">Okay</div>
  </div>
</div>

<h2 class="ui header pageHeader">
  <i class="envelope icon"></i>
  <div class="content">
    Send Message
  </div>
</h2>

<div class="ui left aligned segment pageSegment" id="messageCreateForm">

  <form id="generateMessageForm" class="ui form">

    <h4 class="ui dividing header">Message Creator</h4>

    <h4 id="transferFormFromAddress" class="breakable"><a class="ui purple label">From Address</a> {{transferFrom.address}}</h4>
    <h4 class="breakable"><a class="ui yellow label">Quanta Balance</a> {{transferFrom.balance}}</h4>

    <h4 class="ui horizontal divider header">
      <i class="envelope icon"></i>
      Your Message
    </h4>

    <div class="field">
      <label>Message (Max Length 80 bytes)</label>
      <input type="text" id="message" autocomplete="off">
    </div>

    <div class="field">
      <label>Message Creation Fee (In Quanta)</label>
      <input type="text" id="fee" value="0.25" autocomplete="off">
    </div>

    <div class="field">
      <label>OTS Key Index</label>
      <input type="text" id="otsKey" placeholder="0" value="{{otsKeyEstimate}}" autocomplete="off" {{ledgerWalletDisabled}}>
    </div>

    <div class="field">
      <div class="ui warning icon message" style="display: inline-flex;">
        <i class="warning icon"></i>
        <div class="content">
          <div class="header">
            OTS Key Index Warning
          </div>
          {{#if isLedgerWallet}}
          <p>The <strong>OTS (One Time Signature)</strong> Key Index in the field above is based on data provided by your Ledger Device. You should <b>never</b> re-use the same OTS Key for more than 1 transaction. As you are using a Ledger Device, you can rest assured your Device will keep track of all used signatures for you. As a result, you cannot change the OTS Key that will be used to sign this transaction as the Ledger Device will automatically use the next one in line.</p>
          {{else}}
          <p>The <strong>OTS (One Time Signature)</strong> Key Index in the field above is estimated based on data provided by the QRL node you're connected to. You should <b>never</b> re-use the same OTS Key for more than 1 transaction. If you are unsure, it is safest to write down all used OTS Key Indexes, and store them in a safe place.</p>
          {{/if}}
        </div>
      </div>
    </div>

    <div class="field">
      <button id="createMessage" class="ui huge primary button red" style="float: left;">Create Message</button>
      <br />
    </div>

    <div class="field">
      <br />
      <div id="generating" style="display: none;" class="ui icon message">
        <i class="notched circle loading icon"></i>
        <div class="content">
          <div class="header">
            Just one moment
          </div>
          <p>Generating your new message transaction...</p>
        </div>
      </div>
    </div>   

  </form>
</div>

<div id="messageCreationFailed" class="ui red segment pageSegment" style="display: none;">
  <h4>Message Creation Failed</h4>
  <p style="word-wrap: break-word; word-break: break-all;">Error: {{messageCreationError}}</p>
</div>

</template>